<template>
	<xbd-pages-content title="我的站点">
	<template #content>
		<view class="content" :style="'minHeight:'+windowHeight+'px'">
			<view class="group">
				<checkbox-group class="all-checked" @change="AllcheckboxChange">
					<label class="item">
						<checkbox value="" :checked="checked" />
						全选
					</label>
				</checkbox-group>
				<checkbox-group @change="checkboxChange">
					<template v-for="(item, index) in list">
						<view class="list-item item" :key="item._id">
							<label>
							    <view>
							        <checkbox :value="index" :checked="item.checked" />
							    </view>
							</label>
							<AddressInfo :item="item" @clickAddress="clickAddress"></AddressInfo>
						</view>
					</template>
					<xbd-null-list v-if="!list.length"></xbd-null-list>
				</checkbox-group>
			</view>
			<view class="btn-group">
				<button type="default" class="btn delete" @click="deleteSite">删除站点</button>
				<button type="default" class="btn add" @click="add">新增站点</button>
			</view>
		</view>
	</template>
	</xbd-pages-content>
</template>

<script>
	import AddressInfo from '@/components/deliveryorder/AddressInfo.vue';
	import { DeliveryOrder } from '@/api/index.js';
	export default {
		data() {
			return {
				id:'',
				windowHeight:0,
				isGet: true,
				list: [],
				checked: false
			};
		},
		components: {
			AddressInfo
		},
		watch: {
			checked(val) {
				if (val) {
					this.list.forEach(i => i.checked = true);
				}
			}
		},
		methods: {
			clickAddress(item) {
				uni.$emit('getInfo', item, this.isGet);
				uni.navigateBack({
					delta: 1
				});
			},
			checkboxChange(e) {
				this.list.forEach(i => i.checked = false);
				if (e.detail.value.length === this.list.length) {
					this.checked = true;
				} else {
					this.checked = false;
					e.detail.value.forEach(i => {
						this.list[i].checked = true;
					})
				}
			},
			AllcheckboxChange(e) {
				if (this.checked) {
					this.list.forEach(i => i.checked = false);
				}
				this.checked = !this.checked;
			},
			async deleteSite() {
				const arr = [];
				this.list.forEach(i => {
					if (i.checked) {
						arr.push(i._id)
					}
				})
				if (!arr.length) {
					this.$showToast('请先选择站点再删除！');
				} else {
					try {
						this.$showLoading('加载中');
						const res = await DeliveryOrder.deleteDeliveryStation(arr);
						uni.hideLoading();
						const {  success } = res;
						if (success) {
							this.$showToast('删除成功！');
							this.list = this.list.filter(item => !~arr.indexOf(item._id))
						}
						// uni.hideLoading();
					} catch(e) {
						uni.hideLoading();
					}
				}
			},
			add() {
				uni.navigateTo({
					url: `./addsite?id=${this.id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getDeliveryStation(this.id);
					const { success, data: {list} } = res;
					if (success) {
						list.forEach(item => {
							item.checked = false;
						});
						this.list = list;
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			}
		},
		onLoad(res) {
			this.id = res.id
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			});
			this.isGet = res.isGet;
			this.init();
			uni.addInterceptor('navigateBack', {
			  success:() => {
				  this.checked = false;
				  this.init();
			  }
			});
			
		},
		onUnload() {
			uni.removeInterceptor('navigateBack');
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .list-item {
		width: 670rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	::v-deep .item {
		width: 670rpx;
		
		padding: 10px 0;
		border-bottom: 1px solid #E8E2E2;
		
		box-sizing: border-box;
	}
	.content {
		// position: relative;
		background-color: #FFFFFF;
		.group {
			padding: 0 40rpx;
			margin-bottom: 140rpx;
		}
		.all-checked {
			font-size: 28rpx;
			
			color: $uni-text-color;
		}
		.btn-group {
			position: fixed;
			bottom: 0;
			left: 0rpx;
			background-color: #FFFFFF;
			width: 750rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			.btn {
				margin-bottom: 70rpx;
				width: 320rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				border-radius: 8rpx;
				
				font-size: 28rpx;
				&.delete {
					border: 1px solid $uni-color-primary;
				
					background-color: #FFFFFF;
					color: $uni-color-primary;
				}
				&.add {
					background-color: $uni-color-primary;
					
					color: #FFFFFF;
				}
			}
		}
	}
</style>
